<%@ include file="/common/taglibs.jspf"%>
<!DOCTYPE html>
<html lang="en">
  <head >
	    <title>Bootstrap, from Twitter</title>
	    <!--  
	    <meta charset="utf-8">	
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="description" content="">
	    <meta name="author" content="">
	    -->
	     <link type="text/css" rel="stylesheet" href="${ctx}/resources/js/jquery/ux/chosen/chosen.css" />
  </head>
  <body>
  
      <!--Body content-->
      	  <div id="showMessage"></div>
      	  
      	  <form id="formForList" action="${ctx}/system/rolelist.do">
			  <div class="control-group">
			    <div class="controls">
				    <input type="text" name="Q_roleName_S_LK" value="${Q_roleName_S_LK}" placeholder="Search By Role Name">
			   		<input type="submit" class="btn btn-info" value="Search" style="margin-bottom:9px;">
			   		<page:pageForList pagingBean="${pageBean}"/>
			    </div>
			  </div>
		 </form>
      <!-- table start -->
      <div class="row-fluid" style="min-height: 500px;">
      	<div id="listPanel" >
		  <table class="table table-bordered table-hover table-condensed">
			  <thead>
				<tr >
					<td colspan="6" >
						    <a class="btn btn-primary" href="#" id="addButton"><i class="icon-pencil"></i>Add</a>
						    <a class="btn btn-primary" href="#" id="delButton"><i class="icon-trash"></i>Delete</a>
						    <a class="btn btn-primary" href="#" ><i class="icon-ban-circle"></i>Ban</a>
					</td>
				</tr>
		  		<tr>
		  			<th>#</th>
		  			<th>roleId</th>
		  			<th>roleName</th>
		  			<th>roleDesc</th>
		  			<th>resources</th>
		  			<!-- 
			  			<th>users</th>
			  			<th>operation</th>
		  			 -->
		  		</tr>
		  		</thead>
		  		<tbody>
		  		<c:forEach var="role" items="${roleList }" >
		  			<tr>
		  				<td>
		  					<input type="checkbox" name="checkboxForRole" value="${role.roleId }">
		  				</td>
		  				<td>
		  					${role.roleId }
		  				</td>
		  				<td>
		  					${role.roleName }
		  				</td>
		  				<td>
		  					${role.roleDesc }
		  				</td>
		  				<td>
		  					<c:forEach var="res" items="${role.resources }">
		  						<i class="icon-leaf"></i>${res.resName}
		  					</c:forEach>
		  				</td>
		  				
		  				<!-- 
		  				<td>
		  					<c:forEach var="user" items="${role.users }" >
		  						<i class="icon-user"></i>${user.userName}
		  					</c:forEach>
		  				</td>
		  				<td>
		  					<a href="#setRoleModal" data-toggle="modal" onclick="loadSelector('${role.roleId}')">
			  					 <i class="icon-leaf"></i>
		  					</a>
		  				</td>
		  				 -->
		  			</tr>
		  		</c:forEach>
		  		</tbody>
		</table>
			</div><!-- end of listPanel -->
	  <!-- table end -->
	  
	  <!-- add an role modal -->
	  <div id="detailPanel"  style="display:none; border: solid 1px green; border-radius:4px;padding : 5px 0 0 15px;">
	      	<div style="height: 15px;">
		        <button id="closeButton" type="button" class="close pull-right">&times;close</button>
	      	</div>
            <form id="SysRoleForm" class="form-horizontal" action="${ctx}/system/add_sys_role.do">
	            <div >
	              <h4>Role Detial</h4>
	               	<input type="hidden" name="roleId" >
	               	
				    <label for="inputRoleName">Role Name</label>
				    <input type="text"  style="width:90%" name="roleName">
				    
				    <label>Select Resource</label>
				    <select id="roleRes" name="resIds" data-placeholder="Please select resources." style="width:382px;" multiple class="chzn-select" tabindex="8">
						  <c:forEach var="res_item" items="${resAll}">
				         	 <option value="${res_item.resId}">${res_item.resName}</option>
						  </c:forEach>
			        </select>
				    
				    <label for="inputRoleDesc">Role Desc</label>
				    <textarea style="width:90%" rows="6" name="roleDesc"></textarea>
	            </div>
	            <div style="padding:5px;">
	              <a id="editButton" class="btn btn-primary">Edit</a>
	              <a id="saveButton" class="btn btn-primary disabled">Save</a>
	            </div>
            </form>
	      </div>
	  <!-- add an role selector modal -->
	   
	 </div><!-- end of row-fluid -->
  	
  	<script src="${ctx}/resources/js/src/system/sys_role_list.js"></script>
	<script type="text/javascript" src="${ctx}/resources/js/jquery/ux/chosen/chosen.jquery.min.js"></script>
  </body>
  </html>